import React, { Component } from "react";
import { Input, Card, Icon, Modal, Menu, Dropdown } from "antd";
import img from "../../../assets/images/img.png";
import LinkButton from "../../../components/link-button/index";
const { TextArea } = Input;
const { Search } = Input;

class home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    const menu = (
      <Menu>
        <Menu.Item key="0">
          <LinkButton
            onClick={() => {
              this.props.history.push("/project/projectdetail");
            }}
          >
            项目设置
          </LinkButton>
        </Menu.Item>
        <Menu.Item key="1">
          <LinkButton>删除</LinkButton>
        </Menu.Item>
      </Menu>
    );
    return (
      <div>
        <Search
          style={{ width: 200, margin: 5 }}
          placeholder="搜索项目"
          onSearch={(value) => console.log(value)}
        />
        <div style={{ margin: 5 }}>
          <div>
            <span>全部项目</span>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              flexWrap: "wrap",
            }}
          >
            <Card
              style={{ width: 300, cursor: "pointer" }}
              onClick={this.showModal}
            >
              <div
                style={{
                  width: 200,
                  textAlign: "center",
                }}
              >
                <img src={img} alt="img" />
              </div>
              <div style={{ width: 200, textAlign: "center", fontWeight: 550 }}>
                新建项目
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  12
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Dropdown overlay={menu} trigger={["click"]}>
                    <LinkButton
                      className="ant-dropdown-link"
                      onClick={(e) => e.preventDefault()}
                    >
                      <Icon type="ellipsis" />
                    </LinkButton>
                  </Dropdown>
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户A</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  12
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Icon type="ellipsis" />
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户B</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  13
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Icon type="ellipsis" />
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户C</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  14
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Icon type="ellipsis" />
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户D</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  15
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Icon type="ellipsis" />
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户E</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  16
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Icon type="ellipsis" />
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户F</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
            <Card style={{ width: 300 }}>
              <div>
                <span
                  style={{
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  17
                </span>
                <span
                  style={{
                    float: "right",
                    color: "blue",
                    fontWeight: 900,
                    fontSize: 20,
                  }}
                >
                  <Icon type="ellipsis" />
                </span>
                <div style={{ marginTop: 20, marginBottom: 20 }}>12</div>
                <div>
                  <div>
                    <p>客户C</p>
                    <p>创建于 2021-09-17</p>
                  </div>
                  <div>
                    项目成员数：<span style={{ float: "right" }}>0</span>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
        <Modal
          title="填写项目信息"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>
            <span>项目名称：</span>
            <Input
              style={{ width: 400 }}
              placeholder="给项目一个简单直观的名称"
            />
          </p>
          <p>
            <span>项目简介：</span>
            <TextArea style={{ width: 400 }} placeholder="该项目需求描述" />
          </p>
          <p></p>
        </Modal>
      </div>
    );
  }
}

export default home;
